<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>设备监测</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="${pageContext.request.contextPath}/jsp/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Calender.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		
		$('#sect1').blur(function() {
			var sect1 = document.getElementById('sect1').value;
			getSect1(sect1)
		})

		$('#sect').blur(function() {
			var sel = document.getElementById('sect').value;
			setline(sel);
		})

		$('#search').blur(function() {
			var search = document.getElementById('search').value;

			getSearch(search)
		})

		$('#year').blur(function() {
			var year = document.getElementById('year').value;
			getYear(year);
		})

		$('#month').blur(function() {
			var month = document.getElementById("month").value;
			getMonth(month);
		})

		$('#day').blur(function() {
			var day = document.getElementById('day').value;
			getDay(day);
		})

	})

	function getYear(year) {
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/equip/getYear.action',
			data : 'year=' + year,
			success : function(data) {

			}
		});
	}

	function getMonth(month) {
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/equip/getMonth.action',
			data : 'month=' + month,
			success : function(data) {

			}
		});
	}

	function getDay(day) {
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/equip/getDay.action',
			data : 'day=' + day,
			success : function(data) {

			}
		});
	}

	function getSearch(search) {

		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/equip/getSearch.action',
			data : 'search=' + search,
			success : function(data) {

			}
		});
	}

	function getSect1(sect1) {
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath}/equip/getSect1.action',
			data : 'sect1=' + sect1,
			success : function(data) {

			}
		});
	}
	function setline(line) {

		$.ajax({
			type : "post",
			url : '${pageContext.request.contextPath}/equip/changeline.action',
			data : "line=" + line,
			success : function(data) {
                  init()
			}
		});
	}
	
	function nextPage(end) {
		
		$.ajax({
			type:'post',
			url:'${pageContext.request.contextPath}/equip/nextPage.action',
			data:"end="+end,
			success:function(data){
				
				init()
			}
		});
	}
	
	function lastPage(begin){
		$.ajax({
			type:'post',
			url:'${pageContext.request.contextPath}/equip/lastPage.action',
			data:"begin="+begin,
			success:function(data){
				init()
			}
		});
		
	}
	
	
	function init(){
		equipmonitor();
		//window.location.href="${pageContext.request.contextPath }/equip/getList.action";
	}
	
	function getDateLike() {
		$.ajax({
			type:'post',
			url:'${pageContext.request.contextPath}/equip/setDateList.action',
			success:function(data){
			    init()
			}
		});
	}
	
	function setList() {
		$.ajax({
			type:'post',
			url:'${pageContext.request.contextPath}/equip/setList.action',
			success:function(data){		
				init()
			}
		});
	}
	
	function setIndex() {
		$.ajax({
			type:'post',
			url:'${pageContext.request.contextPath}/equip/setIndex.action',
			success:function(data){
				init()
			}
		});
	}
	
	function searchEquip() {
		$.ajax({
			type:'post',
			url:'${pageContext.request.contextPath}/equip/searchEquip.action',
			success:function(data){
				init()
			}
		});
	}
	
	function deleteThis(id) {
		$.ajax({
			type:'post',
			url:'${pageContext.request.contextPath}/equip/deleteThis.action',
			data:'id='+id,
			success:function(data){
				init()
			}
		});
	}
</script>
<base href="${pageContext.request.contextPath}/xiao">
</head>
<body id="body">
	<div class="row">
     <div class="col-md-12">
         <!--breadcrumbs start -->
         <ul class="breadcrumb">
             <li><a href="javascript:void(0)">能源管理系统</a>
             </li>
             <li>能源监测</li>
             <li><a href="javascript:void(0)">设备监测</a></li>
         </ul>
	搜索：
	<select name="option1" id="sect1">
		<option value="equipId">设备序号</option>
		<option value="equipName">设备名称</option>
	</select>

	<input type="text" id="search">
	<button onclick="searchEquip()">提交查询</button>


	<select name="year" id="year"></select>年
	<select name="month" id="month"></select>月
	<select name="day" id="day"></select>日
	<button onclick="getDateLike()">提交查询</button>

	<br>

	<button onclick="setList()">显示全部数据</button>
	显示数据行数：
	<select name="option" id="sect">
		<option value="10">10</option>
		<option value="20">20</option>
		<option value="30">30</option>
		<option value="40">40</option>
		<option value="50">50</option>
	</select>

	<button onclick="setIndex()">首页</button>
	<button onclick="lastPage(${indexOf})">上一页</button>
	<button onclick="nextPage(${line-1})">下一页</button>
	<br>
	<table cellspacing="0" cellpadding="0" border="1" width="1000px"
		style="text-align: center">
		<tr>
			<td>ID:</td>
			<td>设备序号</td>
			<td>设备名称</td>
			<td>能耗总值(KWH)</td>
			<td>基准值(KWH)</td>
			<td>当前能耗</td>
			<td>日期</td>
			<td>操作</td>
		</tr>
		<c:forEach items="${equipList}" var="equip" begin="${indexOf}"
			end="${line-1}">
			<tr>
				<td>${equip.id}</td>
				<td>${equip.equipId}</td>
				<td>${equip.equipName}</td>
				<td>${equip.totalConsum}</td>
				<td>${equip.referValue}</td>
				<td>${equip.currentConsum}</td>
				<td>${equip.date}</td>
				<td><a
					href="equip/updateThis.action?id=${equip.id}">修改</a>
				
					<button onclick="deleteThis(${equip.id})">删除</button>
					</td>
					
			</tr>
		</c:forEach>
	</table>
	</div>
	</div>
</body>
</html>